<!DOCTYPE html>
<html lang="zh-CH">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Fly bird</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: "microsoft yahei";
            box-sizing: border-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        body {
            width: 100%;
            min-width: 320px;
            max-width: 640px;
            height: 100%;
            position: absolute;
            top: 0px;
            bottom: 0px;
        }
        
        #box {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            background: url(img/back.jpg);
            background-size: auto 120%;
            background-position: 0px 0px;
        }
        /* 小鸟 */
        
        #bird {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 25%;
            background: url(img/bird.gif) no-repeat;
            background-size: 100% 100%;
            z-index: 9;
        }
        /* 上面的竹子 */
        
        .zhuz1 {
            width: 15%;
            height: 50%;
            background: url("img/bamboo.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 100%;
        }
        /* 下面的竹子 */
        
        .zhuz2 {
            width: 15%;
            height: 50%;
            background: url("img/bamboo.png") no-repeat;
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
            background-size: 100% 100%;
            position: absolute;
            left: 100%;
        }
        /* 初始页面的盒子 */
        
        #big {
            width: 100%;
            height: 100%;
            position: relative;
        }
        /*标题*/
        
        #big_bt {
            position: absolute;
            top: 15%;
            width: 100%;
            height: 50px;
            background: linear-gradient(to left, #ffaa00, #ff0000);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
        }
        /* 鼠标键盘操作的按钮 */
        
        .an {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -65px;
            width: 130px;
            height: 45px;
            background: linear-gradient(to left, #fd8a00, #fd4f25);
            border-radius: 25px;
            cursor: pointer;
            line-height: 45px;
            text-align: center;
            color: #eeeeee;
            box-shadow: 0px 0px 10px #fd6d25;
            font-size: 18px;
        }
        
        .an:hover {
            background: #fd9854;
        }
        /* 初始页面的说明 */
        
        #big_sm {
            position: absolute;
            bottom: 2%;
            left: 3%;
            width: 94%;
            height: 120px;
            padding: 15px;
            background: #fff;
            border-radius: 15px;
            font-size: 16px;
            line-height: 1.6;
            opacity: 0.5;
            color: black;
        }
        /* 死亡后的页面 */
        
        #over {
            display: none;
            position: relative;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.7;
            z-index: 10;
            top: -100%;
        }
        
        #over h1 {
            position: absolute;
            top: 20%;
            width: 100%;
            color: #fff;
            font-size: 40px;
            font-weight: 400;
            text-align: center;
        }
        /* 死亡后页面显示的分数 */
        
        #ndfen {
            position: absolute;
            top: 40%;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #eee;
            font-size: 16px;
        }
        /* 重新开始 */
        
        #rest {
            position: absolute;
            top: 60%;
            width: 100%;
            height: 40px;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            color: #eee;
            margin: 0px auto;
            font-size: 20px;
        }
        /* 鼠标的点击按钮 */
        
        #dian {
            width: 70px;
            height: 70px;
            border-radius: 50px;
            background: #FD6D25;
            cursor: pointer;
            line-height: 100px;
            text-align: center;
            font-size: 25px;
        }
        /* 按钮的外面套的盒子 */
        
        #anniu {
            text-align: center;
            display: none;
            position: absolute;
            left: 40%;
            z-index: 7;
        }
        /* 左上角的分数 */
        
        #fen {
            width: 80px;
            height: 40px;
            border: 3px solid #4b7a66;
            border-radius: 5px;
            color: #ff5500;
            font-size: 25px;
            text-align: center;
            line-height: 34px;
            font-weight: bolder;
            margin: 5px;
            position: absolute;
            z-index: 7;
            display: none;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="bird"></div>
        <div id="over">
            <h1>Game&emsp;Over</h1>
            <div id="ndfen">你的分数是：<span id="ff">0</span>分 </div>
            <div id="rest" onclick="rest()">重新开始</div>
        </div>

        <div id="fen">0</div>
        <div id="big">
            <div id="big_bt">F l y &emsp; B i r d </div>
            <div class="an" onclick="shubiao()">开始游戏</div>

            <div id="big_sm">
                <p>游戏目标是让小鸟上下移动来躲避竹子</p>
                <p>游戏方式为：点击屏幕小鸟向上飞，松开屏幕小鸟自动向下飞。</p>
            </div>
        </div>
        <audio src="img/back.mp3" id="music_back" loop="loop"></audio>
        <audio src="img/over.mp3" id="music_over"></audio>
    </div>

    <script type="text/javascript">
        var UT = null; //鼠标抬起
        var DT = null; //鼠标按下
        var kg = "guan"; //开关
        var fs = 0; //分数
        var Zs = 2;
        var ZT = 1500; //竹子移动速度

        function rand(m, n) { //随机数
            return Math.ceil(Math.random() * (n - m + 1)) + (m - 1);
        }

        var box = document.getElementById("box"); //鸟的初始位置
        var bird = document.getElementById("bird");
        var bird_top = box.offsetHeight / 2 - bird.offsetHeight / 2 + 20;
        bird.style.top = bird_top + "px"; //纵坐标			
        var music_back = document.getElementById("music_back"); //背景音乐
        //鼠标操作
        function shubiao() {
            kg = "kai";
            //隐藏开始界面 
            var big = document.getElementById("big");
            setInterval(function() {
                    var btop = big.offsetTop - 10;
                    big.style.top = btop + "px";
                    if (btop >= 0) {
                        btop = 0;
                        big.style.top = btop + "px";
                    }
                }, 10)
                // big.style.display = "none";

            var fen = document.getElementById("fen");
            fen.style.display = "block"; //显示分数

            music_back.play(); //播放背景音乐

            document.addEventListener('touchend', function() { //抬起鼠标
                clearInterval(DT);
                DT = null;
                if (UT == null) {
                    UT = setInterval(function() { //自动向下掉
                        var btop = bird.offsetTop + 3;
                        bird.style.top = btop + "px";
                        var heig = box.offsetHeight - bird.offsetHeight; //掉的边界
                        if (btop >= heig) {
                            btop = 0;
                            bird.style.top = heig + "px";
                        }
                    }, 22)
                }
            })
            document.addEventListener('touchstart', function() {
                clearInterval(UT);
                UT = null;
                if (DT == null) {
                    DT = setInterval(function() {
                        var btop = bird.offsetTop - 2;
                        bird.style.top = btop + "px";
                        if (btop <= 0) {
                            btop = 0; //上移的边界
                            bird.style.top = btop + "px";
                        }
                    }, 10)
                }
            })
        }

        // 背景移动
        var backX = 0;
        setInterval(function() {
            backX -= 2;
            box.style.backgroundPositionX = backX + 'px';

        }, 25)

        //生成柱子
        function time1() {
            if (kg == "guan") {
                return;
            }
            var nn = rand(-200, 0); //随机生成柱子的位置
            var xzhuz1 = document.createElement("div");
            xzhuz1.style.top = nn + "px";
            xzhuz1.setAttribute("class", "zhuz1");
            box.appendChild(xzhuz1);
            var Hzz1 = xzhuz1.offsetHeight; //柱子的高
            var Wzz1 = xzhuz1.offsetWidth;

            //柱子1移动				
            var z1 = setInterval(function() {
                var zleft1 = xzhuz1.offsetLeft - Zs;
                if (zleft1 <= -100) {
                    clearInterval(z1);
                    box.removeChild(xzhuz1);
                }
                //获取鸟的位置并赋值给下面
                var sw = document.getElementById("bird");
                var bileft = sw.offsetLeft;
                var baleft = sw.offsetLeft + 50;
                var bitop = sw.offsetTop;
                var batop = sw.offsetTop + 50;


                // 分数增加
                if (bileft == zleft1 + Wzz1 || bileft == zleft1 + Wzz1 + 1) {
                    //通过竹子的音效
                    var music1 = document.createElement('audio');
                    music1.innerHTML = '<audio src="img/pass.mp3" autoplay="autoplay" ></audio>'
                    box.appendChild(music1);
                    fs++;
                    var fen = document.getElementById("fen");
                    fen.innerHTML = fs;
                    var ff = document.getElementById("ff");
                    ff.innerHTML = fs;

                }
                // 碰撞柱子游戏结束
                if (bileft <= zleft1 + 50 && baleft >= zleft1 && bitop <= nn + Hzz1 - 10) {
                    clearInterval(z1);
                    clearInterval(z2);
                    gameover();
                }
                xzhuz1.style.left = zleft1 + "px";
            }, 12)

            //柱子2移动
            var xzhuz2 = document.createElement("div");
            xzhuz2.style.top = (nn + Hzz1 + 200) + "px";
            xzhuz2.setAttribute("class", "zhuz2");
            box.appendChild(xzhuz2);
            var z2 = setInterval(function() {
                var zleft2 = xzhuz2.offsetLeft - Zs;
                if (zleft2 <= -100) {
                    clearInterval(z2);
                    box.removeChild(xzhuz2);
                }
                //获取鸟的位置并赋值给下面
                var sw = document.getElementById("bird");
                var bileft = sw.offsetLeft;
                var baleft = sw.offsetLeft + 50;
                var bitop = sw.offsetTop;
                var batop = sw.offsetTop + 50;
                // 碰撞柱子游戏结束
                if (bileft <= zleft2 + 50 && baleft >= zleft2 && batop >= nn + Hzz1 + 210) {
                    clearInterval(z1);
                    clearInterval(z2);
                    gameover();
                }
                xzhuz2.style.left = zleft2 + "px";
            }, 12)
        }
        var time2 = setInterval(time1, ZT);

        //游戏结束后弹出界面
        function gameover() {
            //死亡后，小鸟一直向下掉
            setInterval(function() {
                var btop = bird.offsetTop + 8;
                bird.style.top = btop + "px";
                var heig = box.offsetHeight - bird.offsetHeight; //掉的边界
                if (btop >= heig) {
                    btop = 0;
                    bird.style.top = heig + "px";
                }
            }, 20)

            music_over.play();
            music_back.pause(); //背景音乐停
            clearInterval(time2);
            clearInterval(UT);
            kg = "guan";
            var over = document.getElementById("over");
            over.style.display = "block";
            setInterval(function() {
                var otop = over.offsetTop + 10;
                over.style.top = otop + "px";
                if (otop >= 0) {
                    otop = 0;
                    over.style.top = otop + "px";
                }
            }, 10)

        }

        function rest() {
            window.location.reload(); //刷新页面,相当于F5
        }
    </script>
</body>

</html>